<template>
  <div class="">
    <div class="cardDiv">
      <div class="bannerDiv">
          <a-carousel autoplay >
            <template v-if="imgList && imgList.length>0">
              <template v-for="(item,index) in imgList" >
                <div :key="index" :value="index" @click="onNewsDetail(item,index,'/center/newsPage/focusNewsPage')">
                  <div style="position: relative;">
                    <img :src="imgPath+item.contentImg[0].path" />
                  <div class="banner-content" style=""><div class="banner-content-span" :title="item.contentTitle">{{item.contentTitle}}</div></div>
                  </div>
                    
                </div>
              </template>
            </template>
            <template v-else>
              <div style="background:#f8f5f4;height:380px;"  > <a-empty :image="simpleImage" /></div>
            </template>
          </a-carousel>
      </div>  
      <div class="newsDiv">
        <a-tabs ref="navTabs" size="small" v-model="mouseoverSelect" @tabClick="onTabSelectd($event)">
           <!-- @mouseover="onMouseoverTab(mouseoverSelect)" -->
          <a-tab-pane key="1" tab="通知公告" >
              <template v-for="(item,index) in noticeList" >
                <div v-if="index===0" :key="index" :value="item" @click="onNewsDetail(item,index,'/center/newsPage/noticePage')">
                  <div v-if="ms_ie">
                    <div class="news-div-item-first" :title="item.contentTitle">{{item.contentTitle.length>40?item.contentTitle.slice(0,39)+'...':item.contentTitle}}</div>
                    <div class="news-div-item-first-time">
                      <div style="height:2px;width:50px;border-top:1px solid #666666;float:left;margin-top:11px;margin-right:10px;margin-left:10px;" ></div>
                      <span  v-if="item.contentDatetime!=='' && item.contentDatetime!==null">{{ moment(item.contentDatetime).format('YYYY-MM-DD') }}</span>
                    </div>
                  </div>
                  <div v-else>
                    <div class="news-div-item-first" :title="item.contentTitle">{{item.contentTitle}}</div>
                    <div class="news-div-item-first-time">
                      <div style="height:2px;width:50px;border-top:1px solid #666666;float:left;margin-top:11px;margin-right:10px;margin-left:10px;" ></div>
                      <span  v-if="item.contentDatetime!=='' && item.contentDatetime!==null">{{ moment(item.contentDatetime).format('YYYY-MM-DD') }}</span>
                    </div>
                  </div>
                  
                </div>
                <div v-else class="newsItemDiv"  :key="index"  @click="onNewsDetail(item,index,'/center/newsPage/noticePage')">
                  <div class="pointIconSpan"></div>
                  <div class="newitemContentDiv">
                    <span class="item-content"  :title="item.contentTitle" >{{item.contentTitle}} </span>
                  </div>
                  <div class="newsItemTime">
                     <span  v-if="item.contentDatetime!=='' && item.contentDatetime!==null">{{ moment(item.contentDatetime).format('YYYY-MM-DD') }}</span>
                  </div>
                </div>
              </template>
              <a-empty :image="simpleImage"  v-if="noticeList.length==0" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="新闻动态"  >
           <template v-for="(item,index) in newsList">
                <div v-if="index===0" :key="index" :value="item" @click="onNewsDetail(item,index,'/center/newsPage/focusNewsPage')">
                   <div v-if="ms_ie">
                     <div class="news-div-item-first" :title="item.contentTitle">{{item.contentTitle.length>40?item.contentTitle.slice(0,39)+'...':item.contentTitle}}</div>
                     <div class="news-div-item-first-time">
                     <div style="height:2px;width:50px;border-top:1px solid #666666;float:left;margin-top:11px;margin-right:10px;margin-left:10px;" ></div>
                       <span  v-if="item.contentDatetime!=='' && item.contentDatetime!==null">{{ moment(item.contentDatetime).format('YYYY-MM-DD') }}</span>
                     </div>
                   </div>
                   <div v-else>
                     <div class="news-div-item-first" :title="item.contentTitle">{{item.contentTitle}}</div>
                     <div class="news-div-item-first-time">
                     <div style="height:2px;width:50px;border-top:1px solid #666666;float:left;margin-top:11px;margin-right:10px;margin-left:10px;" ></div>
                       <span  v-if="item.contentDatetime!=='' && item.contentDatetime!==null">{{ moment(item.contentDatetime).format('YYYY-MM-DD') }}</span>
                     </div>
                   </div>
                  
                </div>
                <div v-else class="newsItemDiv"  :key="index"  @click="onNewsDetail(item,index,'/center/newsPage/focusNewsPage')">
                  <div class="pointIconSpan"></div>
                  <div class="newitemContentDiv">
                    <span class="item-content"  :title="item.contentTitle" >{{item.contentTitle}} </span>
                  </div>
                  <div class="newsItemTime">
                    <span  v-if="item.contentDatetime!=='' && item.contentDatetime!==null">{{ moment(item.contentDatetime).format('YYYY-MM-DD') }}</span>
                  </div>
                </div>
              </template>
              <a-empty :image="simpleImage" v-if="newsList.length==0" />
          </a-tab-pane>
        </a-tabs> 
      </div>  
    </div>
  
    <!-- <div class="bannerLong">
      <img src="@/assets/banner_long.png" @click="onBannerOne" />
    </div> -->
  </div>
  
</template>

<script>
import moment from "moment";
import newsNoticeApi from '@/api/newsNotice'
import { Empty } from 'ant-design-vue';
  export default {
    name: "item1",
    beforeCreate() {
      this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
    },
    data() {
      return {
        ms_ie:false,
        mouseoverSelect:"1",
        imgPath:this.$globalConfig.adressPath,
        noticeList:[],
        noticePageFilter: {
          contentCategoryId:"152",
          pageNo:1,
          pageSize:5 ,
        },
        newsList:[],
        newsPageFilter: {
          contentCategoryId:"153",
          pageNo:1,
          pageSize:5 ,
        },
        imgList:[
          // {
          //   id:1,
          //   url:'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',
          //   img:require('@/assets/banner.png'),
          //   content:"11111111111111111111111111133333333333333333332222222222222222222"
          // },
          // {
          //   id:2,
          //   url:'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',
          //   img:require('@/assets/banner.png'),
          //   content:"11111111111111111111111111133333333333333333332222222222222222222"
          // },
          // {
          //   id:3,
          //   url:'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',
          //   img:require('@/assets/banner.png'),
          //   content:"11111111111111111111111111133333333333333333332222222222222222222"
          // },
          // {
          //   id:4,
          //   url:'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',
          //   img:require('@/assets/banner.png'),
          //   content:"11111111111111111111111111133333333333333333332222222222222222222"
          // }
        ],
        picNewsPageFilter: {
          contentCategoryId:"153",
          pageNo:1,
          pageSize:4 ,
        },
      }
    },
    created(){
      var ua = window.navigator.userAgent;
      var old_ie = ua.indexOf('MSIE ');
      var new_ie = ua.indexOf('Trident/');
      if ((old_ie > -1) || (new_ie > -1)) {
          this.ms_ie = true;
      }
      this.get_newsNotice();
    },
    mounted() {
      
    //  this.$nextTick(() => {
    //   // this.$refs.navTabs.$refs.nav.$nextTick(() => {
    //     // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
    //     var target = document.getElementsByClassName("ant-tabs-nav");
    //     let that = this;
    //     for (let i = 0; i < target.length; i++) {
    //       target[i].addEventListener("mouseover", () => {
    //         // @tabClick="onTabSelectd($event)"
    //         // that.$refs.navTabs.handleTabClick(1, String(i));
    //          console.log("--------------");
    //         console.log(i);
    //         console.log("++++++++++++++");
    //         this.onTabSelectd(i+1)
    //       });
    //     }
    //   // });
    // });
  },
    methods: {
      onTabChange(key, type) {
        this[type] = key;
      },
      onChange(a, b, c) {
        // console.log(a, b, c);
      },
      get_newsNotice() {
        newsNoticeApi.get_notice_news_list(this.noticePageFilter).then(res => {
            this.noticeList = res.rows;
          })
          .catch(err => {
          });

        newsNoticeApi.get_notice_news_list(this.newsPageFilter).then(res => {
            this.newsList = res.rows;

            let list = res.rows;
            for(let item of list) {
              if(item.contentImg!=undefined ){
                item.contentImg = JSON.parse(item.contentImg);
              }
              if(item.contentImg.length>0){
                  this.imgList.push(item);
              }
              
            }
          })
          .catch(err => {
          });

        // newsNoticeApi.get_notice_news_list(this.picNewsPageFilter).then(res => {
        //     let list = res.rows;
        //     for(let item of list) {
        //       if(item.contentImg!=undefined ){
        //         item.contentImg = JSON.parse(item.contentImg);
        //       }
        //       if(item.contentImg.length>0){
        //           this.imgList.push(item);
        //       }
              
        //     }

        //   })
        //   .catch(err => {
        //  });
       
      },
       onNewsDetail(item,index,routerLikeTo){
       this.$router.push({
          name:"newsDetail",
          query:{
            type:'detail',
            id:item.id,
            breadcrumbName:'新闻通知',
            routerLikeTo:routerLikeTo,
          }
      });
     },
     onBannerOne(){
        window.open("http://59.50.77.74:8086/");
     },
     onTabSelectd(key) { 
       this.mouseoverSelect = key
     },
     onMouseoverTab(key) { 
      //  this.mouseoverSelect = key
      //  console.log(key);
     }
    },
  };
</script>
<style scoped >
  /* .cardDiv div{
      display:inline;
    }  */


.tabview1{
  width: 67%;
  position: absolute;
  /* z-index: 99999; */
  margin-top: -70px;
  left: 16.5%;
  height: 315px;
}
.banner-content{
  position: absolute; 
  top: 0; 
  left: 0;
  margin-top:319px;
  background:#000;
  color: #fff;
  width:100%;
  opacity: 0.5;
  text-align: left;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
 
}
.banner-content-span{
  width:75%;
  text-overflow: ellipsis;  /*超出内容用省略号*/
  overflow: hidden; /*内容超出后隐藏*/
  white-space: nowrap; /*文本不进行换行*/
  font-size: 14px;
}
.news-div-item-first{
  color: #337BD7; 
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  margin-left:10px;
  margin-right:15px;  
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;/*（行数） */
  -webkit-box-orient: vertical;
}
.news-div-item-first:hover{
   color: #005AB5;
   cursor: pointer;
   font-weight: 600;
}
.news-div-item-first-time{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    margin-top: 5px;
}
.cardDiv{
  margin-top: 21px;
  height: 380px;
  background: #fff;
  overflow: hidden;
}
.bannerDiv{
  width: 55%;
  float: left;
}
.bannerDiv:hover{
  cursor: pointer;
}
.newsDiv{
  width: 45%;
  padding-left: 10px;
  float: left;
  word-wrap: break-word;
  
}

.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 380px;
  width: 100%;
  overflow: hidden;
 
}

.ant-carousel >>> .slick-dots-bottom {
    left:  45%;
  
}
.ant-carousel >>>  .slick-dots-bottom {
    bottom: 27px;
}

.ant-carousel >>> .slick-dots li {
    width: 8px;
    width: 8px;
    position: relative;
    display: inline-block;
    margin: 0 2px;
    padding: 0;
    text-align: center;
    vertical-align: top;
    background: #d7d7d7;
    border-radius:50%;
}

.ant-carousel >>>.slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    color: transparent;
    font-size: 0;
    background: #fff;
    border: 0;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    opacity: 0.3;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.ant-carousel >>> .slick-dots li.slick-active button {
    width: 8px;
    height: 8px;
    background: #2468f2;
    opacity: 1;
    border-radius:50%;
}

img{
  width:100%;
  max-width:100%;
}
::v-deep .ant-tabs-tab {
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    margin: 0 32px 0 0;
    padding: 5px 16px;
    font-weight: 400;
    font-family: Microsoft YaHei;
    color: #666666;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

::v-deep .ant-tabs-bar {
    margin: 0 0 10px 0;
    border-bottom: 1px solid #e8e8e8;
    outline: none;
    -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

::v-deep .ant-list-sm {
    padding-top: 3px;
    padding-bottom: 3px;
}
::v-deep .ant-list-item {
    padding-top: 3px;
    padding-bottom: 3px;
}			
      
::v-deep .ant-tabs .ant-tabs-small-bar .ant-tabs-tab {
    padding: 12px 16px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    /* font-weight: bold; */
}
::v-deep .ant-tabs-nav .ant-tabs-tab-active {
    color: #1890ff;
    font-weight: bold;
}

::v-deep .ant-tabs-ink-bar {
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 0;
    height: 4px;
    background-color: #1890ff;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
 /* .newsItemDiv div{
      display:inline;
    } */
  .newsItemDiv{
    margin-left: 10px;
    margin-top:37px;
    display:flex;
    color: #333; 
    font-size: 12px;
    
  }
  .newitemContentDiv{
    width: 70%;
    /* display: block; */
    text-overflow: ellipsis;  /*超出内容用省略号*/
    overflow: hidden; /*内容超出后隐藏*/
    white-space: nowrap; /*文本不进行换行*/
    margin-top: -5px;
    margin-left: 10px;
  }
  .pointIconSpan{
    background:#337BD7;
    width:14px;
    height:14px;
  }
  .newsItemTime{
    width: 20%;
    color: #333333; 
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    margin-top: -6px;
    text-align: right;
  }
  /* .bannerLong{
    margin-top: 10.5px;
    width: 100%;
    height: 72px;
  }
.bannerLong:hover{
   cursor: pointer;
} */
  
.item-content{
  color: #333;   
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
.item-content:hover{
  color: #005AB5;
  cursor: pointer;
  font-weight: 600;

}

</style>